<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="订单列表" :showHome="false"></c-nav-bar>
		<TopTabs :list="tabList" @changeTab="changeTab" :top="mt" :placeholder="'输入导游名称/订单号'" @sousuo="sousuo">
		</TopTabs>
		<view class="orders">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="top">
					<view class="left">
						<image src="https://i.ringzle.com/file/20231213/5c95794f974d4e0d980f998e39a1902b.png" mode="">
						</image>
						<text :class="item.orderStatus==3||item.orderStatus==-3?'qx':''">导游预订</text>
					</view>
					<view class="right">
						<text class="textYtp" v-if="item.orderStatus==-3">已退款</text>
						<text class="textDzf" v-if="item.orderStatus==-2">退款中</text>
						<text class="textYtp" v-if="item.orderStatus==-1">已取消</text>
						<text :class="oscConfig[item.orderStatus]" v-else>{{osConfig[item.orderStatus]}}</text>
					</view>
				</view>
				<view class="content" @click="orderDetail(item)">
					<view :class="['title',item.orderStatus==-3||item.orderStatus==3?'qx':'']">
						<span>{{item.routeName}}</span>
						<span>￥{{item.realityPay}}</span>
					</view>
					<view class="date">
						<text>下单日期</text>
						<text>{{item.createDate}}</text>
					</view>
				</view>
				<!-- 待使用 -->
				<view class="btns" v-if="item.orderStatus==2">
					<view @tap="againReserve(item)">再来一单</view>
					<view @tap="refund(item)" style="color: #007A69;">退订</view>
				</view>
				<!-- 待支付 -->
				<view class="btns" v-else-if="item.orderStatus==0">
					<view @tap="cancelOrder(item)">取消</view>
					<view @tap="toPay(item)" style="color: #007A69;">去支付</view>
				</view>
				<!-- 已退款 -->
				<view class="btns" v-else-if="item.orderStatus==-3">
					<view @tap="againReserve(item)">再次预订</view>
				</view>
				<!-- 已完成 -->
				<view class="btns" v-else-if="item.orderStatus==3">
					<view @tap="deleteOrder(item)">删除</view>
					<view @tap="goToAppraise(item)">评价</view>
					<view @tap="againReserve(item)">再次预订</view>
				</view>

			</view>
		</view>
		<!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
		<view style="background: white;padding-bottom: 10vh;" v-if="orderList.length ==0">
			<nodata></nodata>
		</view>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	import TopTabs from '../../compoments/TopTabs/topTabs.vue';
	export default {

		components: {
			TopTabs,
			nodata
		},
		data() {
			return {
				orderCodes: '',
				mysearch: '',
				realityPay: '',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				tabList: [{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '待使用'
					},
					{
						name: '已完成'
					},
					{
						name: '退款/售后'
					}
				],
				orderList: [],
				osConfig: {
					0: '待支付',
					1: '待确认',
					2: '待使用',
					3: '已完成',
				},
				oscConfig: {
					0: 'textDzf',
					1: 'textDzf',
					2: 'textDcx',
					3: 'textQx'
				},
				fromList: {
					limit: 10,
					openId: 0,
					page: 1
				},
				openId: 0,
				tabIdx: 0
			}
		},
		onLoad() {
			try {
				var data = wx.getStorageSync('userInfo'); // 替换成你要获取的数据的键名
				if (data) {
					// 数据获取成功
					this.fromList.openId = JSON.parse(data).openId
					console.log(this.fromList.openId, '333');
				} else {
					// 未找到对应数据
					console.log('未找到数据');
				}
			} catch (e) {
				// 获取数据时出错
				console.log('获取数据出错', e);
			}
			this.gtiList()
		},
		methods: {
			goToAppraise(item) {
				console.log(item, 'item');
				const obj = {
					guideId: item.guideId,
					orderCode: item.orderCode,
					sourceType: 6
				}

				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj)
				})
			},
			refund(item) {
				uni.navigateTo({
					url: '/pagesMy/guideServe/refundReason?id=' + item.orderCode
				})
			},
			orderDetail(item) {
				uni.navigateTo({
					url: '/pagesMy/guideServe/orderDetail?orderCode=' + item.orderCode
				})
			},
			changeTab(index) {
				this.tabIdx = index;
				switch (index) {
					case 0:
						this.gtiList()
						break
					case 1:
						this.getiList(0)
						break
					case 2:
						this.getiList(2)
						break
					case 3:
						this.getiList(3)
						break
					case 4:
						this.getiList(-3)
						break
				}
			},
			sousuo(keyword) {
				this.mysearch = keyword;
				switch (this.tabIdx) {
					case 0:
						this.gtiList()
						break
					case 1:
						this.getiList(0)
						break
					case 2:
						this.getiList(2)
						break
					case 3:
						this.getiList(3)
						break
					case 4:
						this.getiList(-3)
						break
				}
			},
			//删除
			deleteOrder(item) {
				console.log(item, 'item');
				this.$api.del('/api/guide/logicDelOrder/' + item.orderCode).then((res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000,

						})
						setTimeout(() => {
							switch (this.tabIdx) {
								case 0:
									this.gtiList()
									break
								case 1:
									this.getiList(0)
									break
								case 2:
									this.getiList(2)
									break
								case 3:
									this.getiList(3)
									break
								case 4:
									this.getiList(-3)
									break
							}
						}, 1500)
					} else {
						uni.showToast({
							title: '删除失败！请重试',
							icon: 'none',
							duration: 2000,
							success() {},
						});
						setTimeout(() => {
							this.gtiList()
						}, 1500)
					}
				})
			},
			//再次预订
			againReserve(item) {
				uni.reLaunch({
					url: '/pages/index/guide/index'
				})
			},
			//入园凭证
			proof(item) {
				console.log(item, 'item');
			},
			//取消订单
			cancelOrder(item) {

				this.$api.post('/api/guide/cancelOrder', {
					orderCode: item.orderCode
				}).then(res => {

					if (res.data.code == 0) {
						this.$showToast('取消成功');
						setTimeout(() => {
							this.gtiList()
						}, 1500)
					} else this.$showModal(res.data.msg);
				})
			},
			//发票/报销
			invoice(item) {
				console.log(item, 'item');
			},
			//去支付
			toPay(item) {
				console.log(item, 'realityPayrealityPay');
				this.realityPay = item.realityPay
				this.orderCodes = item.orderCode
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
				})
			},
			confrimPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderCodes,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								url: `${'/pages/index/guide/paySuccess?orderId='+this.orderCodes+'&realityPay='+this.realityPay}`

							})
						})
					}
				})
			},
			gtiList() {
				this.$api.get('/api/guide/selectGuideOrderPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						page: 1,
						limit: 50,
						searchBox: this.mysearch
					})
					.then(res => {
						this.orderList = res.data.data.list
						// console.log(this.orderList);
					})
			},
			getiList(index) {
				this.$api.get('/api/guide/selectGuideOrderPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						page: 1,
						limit: 50,
						status: index,
						searchBox: this.mysearch,
					})
					.then(res => {
						this.orderList = res.data.data.list
					})
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;

		.orders {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>view {
				width: calc(100% - 96rpx);
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 36rpx 24rpx 24rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 28rpx;
							margin-left: 20rpx;
						}
					}

					.right {
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 37rpx;
					}
				}

				.content {
					padding: 22rpx 0 24rpx 56rpx;
					border-bottom: 1rpx solid #EFEFEF;
					background: #fff;

					.title {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						span:nth-child(1) {
							width: 85%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.date {
						display: flex;
						align-items: center;
						margin-top: 22rpx;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;

							&:nth-child(1) {
								margin-right: 20rpx;
								letter-spacing: 2rpx;
							}
						}
					}

					.room_price {
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;

						.room {
							display: flex;
							align-items: center;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #AAAAAA;
								line-height: 24rpx;
							}
						}

						.price {
							text {}
						}
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&>view {
						margin: 24rpx 0 0 24rpx;
						width: 148rpx;
						height: 56rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.tip {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			margin: 56rpx 0;
		}

		.qx {
			color: #AAAAAA !important;
		}

		.textQx {
			color: #AAAAAA;
		}

		.textDcx {
			color: black;
		}

		.textDzf {
			color: #FF7D01;
		}

		.textYtp {
			color: #AAAAAA;
		}
	}
</style>